<template>
  <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="back()" placeholder fixed />

  <div>
    <!-- <img :src="info.img_big_logo" alt="" class="shopimg" /> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img :src="info.img_big_logo" alt="" class="shopimg" /></van-swipe-item>
      <van-swipe-item><img :src="info.img_big_logo" alt="" class="shopimg" /></van-swipe-item>
    </van-swipe>
    <p v-html="info.goods_introduce"></p>
  </div>
  <van-action-bar replace placeholder>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon icon="shop-o" text="店铺" />
    <van-action-bar-button type="warning" text="加入购物车" @click="addcart()" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>
<script>
import { addreq, itemreq } from '../../api/requies'

export default {
  methods: {
    back() {
      this.$router.back()
    },
    addcart() {
      const id = localStorage.getItem('id')
      addreq(id, this.info.goods_id).then((r) => {
        console.log(r.data)
        if (r.data.code === 1) {
          // eslint-disable-next-line no-undef
          showSuccessToast(r.data.message)
        } else {
          // eslint-disable-next-line no-undef
          showFailToast(r.data.message)
        }
      })
    }
  },
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    const id = this.$route.query.id

    itemreq(id).then((r) => {
      this.info = r.data.info
    })
  }
}
</script>
<style lang="scss">
.shopimg {
  width: 100%;
  height: 400px;
}
.btn {
  display: flex;
  justify-content: start;
}
.my-swipe {
  width: 100%;
  height: 400px;
}
</style>
